<template>
	<view class="battery-container" :class="{ low_power: batteryLevel <= 10 && batteryLevel > 0 }">
<!-- 		<view class="battery-body">
			<view v-if="!isCharging" class="battery-level">
				<view :class="[batteryType]" :style="{ width: batteryLevel + '%' }"></view>
			</view>
			<view v-else class="battery-level">
				<view class="charging"></view>
			</view>
			<view class="battery-value">
				<image v-if="isCharging" src="/static/img/examine-warning.png" class="charging-status__img" mode="heightFix" />
			</view>
		</view>
		<view class="battery-head"></view>
		<view v-if="!isCharging || levelInRange" class="battery-number">{{ range }}%</view> -->
		<view class="circle-block" v-show="batteryLevel <= 10 && batteryLevel > 0 ">
		</view>
		<view  v-show="batteryLevel>10">
		<image class="group"  src="@/static/group.png"></image>
		</view>
		
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";

	export default {
		data() {
			return {
				isCharging: false,
				batteryLevel: 90,
			};
		},

		computed: {
			...mapGetters("ringDataManage", ["battery", "notifyBattery"]),

			batteryType() {
				const value = this.batteryLevel;
				if (value < 0) {
					return "turning";
				}
				if (value <= 10) {
					return "danger";
				} else if (value <= 40) {
					return "warning";
				}
				return "normal";
			},

			levelInRange() {
				return this.batteryLevel >= 0 && this.batteryLevel <= 100;
			},

			range() {
				return Math.min(this.batteryLevel, 100);
			},
		},

		watch: {
			battery: {
				handler({
					batteryLevel,
					batteryCharging
				}) {
					this.isCharging = batteryCharging;
					this.batteryLevel = batteryLevel;
				},
				deep: true,
			},

			notifyBattery({
				batteryLevel
			}) {
				this.batteryLevel = batteryLevel;
			},
		},
	};
</script>
<style scoped lang="scss">
	$bgc: #55ea7c;
	$black: transparent;
	$h: 24rpx;
	$w: 50rpx;

	.battery-container {
		display: flex;
		align-items: center;

		.circle-block {
			border-radius: 50%;
			width: 48rpx;
			height: 48rpx;
			border: 8rpx solid rgba(204, 204, 204, 1);
			;
		}
		.group{
			width: 48rpx;
			height: 48rpx;
			margin-top:5rpx;
		}
		.battery-body {
			width: $w;
			height: $h;
			border: 2px solid #4fff56;
			background-color: $black;
			border-radius: 8rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			border: 4rpx solid black;

			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 100%;
				top: 50%;
				transform: translateY(-50%);
				height: 10rpx;
				width: 2px;
				border-radius: 0 4rpx 4rpx 0;
				background-color: #d0e6f7;
			}

			.battery-level {
				height: 100%;
				width: 100%;

				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				inset: 0px;

				border-radius: 2rpx;
				border: 2rpx solid white;
				overflow: hidden;

				.danger {
					background-color: #c22424;
					max-width: 100%;
					height: 100%;
				}

				.warning {
					background-color: #ff0;
					max-width: 100%;
					height: 100%;
				}

				.normal {
					background-color: rgba(85, 234, 124, 1);
					max-width: 100%;
					height: 100%;
				}

				.charging {
					transition: width 0.3s ease-in-out;
					background-color: rgba(85, 234, 124, 0.8);
					width: 100%;
					animation: expand 2s infinite;
					height: 100%;
				}

				@keyframes expand {
					from {
						width: 1%;
					}

					to {
						width: 100%;
						/* 最终宽度为100px */
					}
				}
			}

			.battery-value {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				inset: 0;
				width: 100%;
				height: 100%;
				font-size: 11px;
				//position: absolute;
				text-align: center;
				color: #fff;
				//mix-blend-mode: difference;
				//margin: 2px;
				box-sizing: border-box;
				line-height: $h;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				border-radius: 1px;

				.charging-status__img {
					height: calc(#{$h} - 12rpx);
				}
			}
		}

		.battery-head {
			width: 2px;
			height: 5px;
			background-color: black;
			border-radius: 0 2px 2px 0;
		}

		.battery-number {
			font-size: 24rpx;
			font-weight: 500;
			text-align: left;
			margin-left: 5rpx;
		}

		&.low_power {
			.battery-level {
				background-color: #c22424;
			}
		}
	}
</style>